<!-- My Bots -->
<!-- Author: Edwin -->
<template>
  <el-card shadow="never"
           class="aui-card--fill">
      <div v-loading="loading">
        <div class="title"
           style="display:flex;justify-content:space-between;">
          <div style="height:32px;line-height:32px;font-size:16px;font-weight: 600">Refresh all materialized view</div>
          <el-button size="small"
                    type="primary"
                    @click="clearAll">Refresh All</el-button>
        </div>
      <el-table
        :data="clearList"
        border
        :height="tableHeight"
        style="width: 100%;margin-top:10px;">
        <el-table-column
          prop="name"
          label="Name"
          width="180">
        </el-table-column>
        <el-table-column
          prop="refreshName"
          label="MV Name"
          width="180">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="refreshCron"
          label="CRON"
          width="180">
        </el-table-column>
        <el-table-column
          prop="type"
          width="180"
          label="Type">
        </el-table-column>
        <el-table-column
          prop="refreshTime"
          width="300"
          label="Refresh Time">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.refreshTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="nextTriggerTime"
          width="300"
          label="Next Trigger Time">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.nextTriggerTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="Action">
          <template slot-scope="scope">
            <el-button @click="clear(scope.row.id)" type="text" size="small">Refresh</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <el-dialog
        title="Result"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="30%">
        <el-alert show-icon v-for="item in result" :key="item.config" :closable="false" style="margin-bottom:10px;"
          :type="item.data.code === 0 ? 'success': 'error'"><span style="font-size:14px">Refresh {{item.config.url.split('/')[item.config.url.split('/').length-1]}} cache {{item.data.code === 0 ? 'success': 'error'}}</span>
        </el-alert>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" @click="dialogVisible = false">Ok</el-button>
        </span>
      </el-dialog>
  </el-card>
</template>
<script>
import { GlobalTimeformat } from '@/utils/common'
export default {
  data () {
    return {
      loading: false,
      dialogVisible: false,
      clearList: [],
      result: []
    }
  },
  computed: {
    tableHeight () {
      return document.querySelector('body').offsetHeight - 200 + 'px'
    }
  },
  created () {
    this.getClearList()
  },
  methods: {
    formatDate (time, str) {
      return GlobalTimeformat(time, 'HH:mm')
    },
    clearAll () {
      this.loading = true
      var arr = []
      this.clearList.forEach(item => {
        arr.push(item.id)
      })
      this.$interface.reports.postAllRefreshMaterialized(arr)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$alert('Refresh All Materialized Error', {
              type: 'error'
            })
          }
          if (res.code === 0) {
            this.$alert('Refresh All Materialized Success', {
              type: 'success'
            })
            this.getClearList()
          }
          this.loading = false
        })
        .catch(() => {
          this.$alert('Server Error', {
            type: 'error'
          })
          this.loading = false
        })
    },
    clear (type) {
      this.clearReportsCache(type)
    },
    clearReportsCache (type) {
      this.loading = true
      const params = {
        id: type
      }
      this.$interface.reports.postRefreshMaterialized(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$alert('Refresh Materialized Error', {
              type: 'error'
            })
          }
          if (res.code === 0) {
            this.$alert('Refresh Materialized Success', {
              type: 'success'
            })
            this.getClearList()
          }
          this.loading = false
        })
        .catch(() => {
          this.$alert('Server Error', {
            type: 'error'
          })
          this.loading = false
        })
    },
    getClearList () {
      this.loading = true
      this.$interface.reports.getAllMaterialList()
        .then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          if (res.data) {
            this.clearList = res.data
          }
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
